<template>
  <div class="bg-white rounded-xl shadow-sm overflow-hidden backdrop-blur-sm bg-white/90 h-full">
    <!-- VIP会员卡片 -->
    <div v-if="user.isVip" class="relative overflow-hidden flex flex-col h-full">
      <div class="p-6 text-white relative">
        <!-- 会员卡背景 -->
        <div class="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1603366615917-1fa6dad5c4fa?q=80&w=2000&auto=format&fit=crop" 
               alt="会员卡背景" 
               class="w-full h-full object-cover" />
          <div class="absolute inset-0 bg-gradient-to-br from-gray-900/90 via-gray-800/85 to-gray-900/90"></div>
        </div>
        
        <!-- 装饰元素 -->
        <div class="absolute top-0 right-0 w-full h-full opacity-20">
          <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
            <circle cx="400" cy="400" r="200" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="10 15" />
            <circle cx="400" cy="400" r="300" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="5 10" />
            <circle cx="400" cy="400" r="380" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="3 5" />
          </svg>
        </div>
        
        <!-- 会员卡内容 -->
        <div class="relative z-10">
          <div class="flex items-center justify-between mb-8">
            <div class="flex items-center">
              <svg class="w-8 h-8 mr-2 text-indigo-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span class="text-xl font-bold">VIP会员</span>
            </div>
            <div class="flex items-center">
              <svg class="w-5 h-5 mr-1 text-indigo-300" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span class="font-medium">高级会员</span>
            </div>
          </div>
          
          <!-- 会员编号和到期时间在同一行 -->
          <div class="flex justify-between items-center mb-6 bg-white/10 backdrop-blur-sm rounded-lg p-3">
            <div class="flex-1">
              <div class="text-xs opacity-80 mb-1">会员编号</div>
              <div class="font-mono text-sm">VIP {{formatNumber(user.vipNumber)}}</div>
            </div>
            <div class="w-px h-10 bg-white/20 mx-4"></div>
            <div class="flex-1">
              <div class="text-xs opacity-80 mb-1">到期时间</div>
              <div class="text-sm">{{ user.vipExpireTime ? formatTime(new Date(user.vipExpireTime), "YYYY-MM-DD") : '' }}</div>
            </div>
          </div>
          
          <!-- 会员等级指示器 -->
          <div class="w-full bg-gray-700/50 h-2 rounded-full mb-2">
            <div class="bg-gradient-to-r from-indigo-500 to-purple-400 h-full rounded-full" style="width: 75%"></div>
          </div>
          <div class="flex justify-between text-xs mb-4">
            <span>会员等级</span>
            <span>高级 Lv.3</span>
          </div>
        </div>
      </div>
      <div class="p-6 bg-gradient-to-b from-gray-50 to-white flex-grow">
        <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd" />
          </svg>
          会员特权
        </h3>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex items-center bg-indigo-50 p-3 rounded-lg transition-all hover:shadow-md">
            <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
              <svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14" />
              </svg>
            </div>
            <span class="text-sm">无限素材下载</span>
          </div>
          <div class="flex items-center bg-purple-50 p-3 rounded-lg transition-all hover:shadow-md">
            <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
              <svg class="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-sm">优先处理任务</span>
          </div>
          <div class="flex items-center bg-blue-50 p-3 rounded-lg transition-all hover:shadow-md">
            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
              <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </div>
            <span class="text-sm">专属客户支持</span>
          </div>
          <div class="flex items-center bg-purple-50 p-3 rounded-lg transition-all hover:shadow-md">
            <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
              <svg class="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
            </div>
            <span class="text-sm">高级编辑功能</span>
          </div>
        </div>
        <div class="mt-4 flex justify-center">
          <div class="flex justify-between gap-4 w-full">
            <button class="w-1/2 bg-gradient-to-r from-indigo-600 to-purple-500 hover:from-indigo-700 hover:to-purple-600 text-white text-sm font-medium py-2 px-4 rounded-lg transition-all flex items-center justify-center" @click="$emit('open-membership-center')">
              <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              会员权益中心
            </button>

            <button class="w-1/2 border border-indigo-600 text-indigo-600 hover:bg-indigo-50 py-2 px-4 rounded-lg text-sm font-medium transition-colors flex items-center justify-center"
                    @click="$emit('redeem')">
              兑换会员码
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 非会员显示开通会员区域 -->
    <div v-else class="p-6 flex flex-col justify-center h-full">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-medium text-gray-900">开通会员</h3>
        <span class="text-sm text-gray-500">享受更多特权</span>
      </div>
      <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-5 mb-5 flex-grow flex flex-col justify-center">
        <div class="flex items-start mb-4">
          <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4 flex-shrink-0">
            <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>
          <div>
            <h4 class="font-medium text-gray-900 mb-1">VIP会员特权</h4>
            <p class="text-sm text-gray-600">解锁全部高级功能，享受无限下载、优先处理和专属客户支持等特权</p>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-3 mb-4">
          <div class="bg-white rounded p-3 text-center">
            <div class="text-xl font-bold text-indigo-600 mb-1">¥9.9</div>
            <div class="text-xs text-gray-500">月度会员</div>
          </div>
          <div class="bg-white rounded p-3 text-center">
            <div class="text-xl font-bold text-indigo-600 mb-1">¥99.9</div>
            <div class="text-xs text-gray-500">年度会员</div>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium transition-colors"
                  @click="$emit('subscribe')">
            立即开通
          </button>
          <button class="flex-1 border border-indigo-600 text-indigo-600 hover:bg-indigo-50 py-2 rounded-lg text-sm font-medium transition-colors"
                  @click="$emit('redeem')">
            兑换会员码
          </button>
        </div>
      </div>
      <div class="text-xs text-gray-500 text-center">开通会员即表示您同意我们的<a href="#" class="text-indigo-600">会员服务条款</a></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserVo } from '@/api/user-service';
import {formatTime,formatNumber} from "@/utils";
// 定义组件接收的属性
defineProps({
  user: {
    type: Object as () => UserVo,
    required: true
  }
});

// 定义组件可以触发的事件
defineEmits(['subscribe', 'redeem', 'open-membership-center']);
</script> 